import classNames from "classnames"
import React from "react"

export type ButtonType  = 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'link'

export type ButtonSize  = 'sm' | 'lg'


// 它的键值就是button的属性名
interface BaseButtonProps {
    /**设置 Button 的类型 */
    btnType?:ButtonType,    
    /**设置 Button 的尺寸 */
    size?:ButtonSize,
    /**设置 Button 的禁用 */
    disabled?:boolean,
    href?:string,
    className?:string,
    children:React.ReactNode
}

// 一个button的属性
type NativeButtonType = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>
// 一个a链接的原生属性
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>

export type ButtonProps = Partial<NativeButtonType & AnchorButtonProps>

export const Button = ({
    btnType = 'default',
    size,
    disabled = false,
    href,
    children,
    className,
    ...restProps
}:ButtonProps) => {
    // 收集class
    const classes = classNames('btn',className, {
        [`btn-${btnType}`]:btnType,
        [`btn-${size}`]:size,
        'disabled': (btnType === 'link') && disabled
    })

    // 区分类型
    if(btnType === 'link' && href) {
        return (
            <a {...restProps} className={classes} href={href}>{ children }</a>
        )
    } else  {
        return (
            <button {...restProps} className={classes} disabled={disabled}>{ children }</button>
        )
    }
}

export default Button